<template>
	<view v-if="is_show" class="b_y bg-white" style="z-index: 88;width: 80%;height: 80vh;margin-left: 240px;">
		<view class="top_head">
			<view class="banmi_flex j-b a-c">
				<view class="m-l-10">
					<text>素材库</text>
				</view>
				<view class="">
					<button @click="on_close" class="banmi_flex j-c a-c but">
						<text>关闭</text>
					</button>
				</view>
			</view>
		</view>

		<scroll-view scroll-y="true" style="height: 72vh;margin-top: 20px;">
			<view class="uni-popup-dialog" @click="on_is_tan"
				:style="'width:'+w_windowWidth+'px;'+'height:'+ h_windowHeight +'px' ">
				<view class="p-10" :style="'height:'+ box_windowHeight  +'px;'">
					<view class="banmi_flex " :style="'height:'+ box1_windowHeight  +'px;'">
						<view v-if="!mobile" style="width: 200px;border: solid 2rpx #DCDCDC;">
							<scroll-view scroll-y="true" :style="'height:'+ (box1_windowHeight - 60)  +'px;'">
								<view>
									<view class="f-16" @click="on_update_group(-1)"
										:class="group_index==-1 ? 'update_groupxz' : ''">
										<button class="group_but">
											<text class="f-16">全部{{t_name}}</text>
										</button>
									</view>
									<view class="banmi_flex j-b a-c" style="padding: 0 10px;"
										:class="index==group_index ? 'update_groupxz' : ''"
										v-for="(vo,index) in wx_group_list" :key="index">
										<button @click="on_update_group(index)" style="width: 130px;background-color:transparent;display: flex;
									justify-content:flex-start;
									">
											<text class="f-16">{{vo.name}}</text>
										</button>
										<view class="" style="position: relative;">
											<button @click="on_more_zu(index)"
												style="padding: 0;background-color: #fff;">
												<icon-park class="icon-color banmi_flex a-c" type="more" theme="outline"
													style="font-size: 20px;" />
											</button>
											<view v-if="vo.show" class="set-tan-zu">
												<button @click="on_group_rename(index)" class="f-16 set-tan-but">
													重命名
												</button>
												<button @click="on_group_del(index)" class="f-16 set-tan-but  ">
													删除
												</button>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
							<view class="p-10" style="position: absolute;bottom: 50px;">
								<button @click="on_news" class="f30 banmi_flex a-c j-c b_y cff  "
									style="background-color: #1E90FF;height: 30px;border-radius: 5px;padding: 0 20px;">
									<text class="f-16">新建分组 +</text>
								</button>
							</view>
						</view>
						<view class="w-100">
							<view class="banmi_flex  a-c m-l-10">
								<view class="w-40">
									<input class="p-10 b_y w-100 f-16" type="text" placeholder="请输入要搜索的名称"
										style="border: solid 1rpx #DCDCDC;">
								</view>
								<view class="banmi_flex m-l-10">
									<button class="banmi_flex a-c j-c popup-image-keyword-b">
										<text class="f-16">搜索</text>
									</button>
									<view @click="on_img(0)" class="m-l-10">
										<button class="f-16 banmi_flex a-c j-c popup-image-up-b">
											<text class="cff f-16">上传</text>
										</button>
									</view>
									<view v-if="t_type =='images'" @click="on_img(1)" class="m-l-10">
										<button class="f-16 banmi_flex a-c j-c popup-image-up-b" style="width: 100px;">
											<text class="cff f-16">压缩上传</text>
										</button>
									</view>
								</view>
							</view>

							<view>
								<scroll-view class="w-100" scroll-y="true"
									:style="'height:'+ (box1_windowHeight - 50)  +'px;'">
									<view class="popup-image-classify w-100">
										<view @mousemove="on_img_index(index)" class="popup-image-classify-list"
											v-for="(vo,index) in wx_list" :key="index">
											<view class="t-c">

												<image @click="on_choice(index)" v-if="vo.type=='images'"
													:class="img_index==index?'popup-image-up-list-img':'popup-image-up-list-img-s'"
													:src="vo.attachment|getImg"></image>
												<video :controls="false" :autoplay="false" :show-fullscreen-btn="false"
													:class="img_index==index ? 'popup-image-up-list-img':'popup-image-up-list-img-s'"
													v-if="vo.type=='video'" :show-center-play-btn="false"
													:show-play-btn="false" :id="'videoId'+index" @play="play(index)"
													@fullscreenchange="fullscreenchange" :src="img_url + vo.attachment">
												</video>
												<view class="banmi_flex j-c a-c"
													v-if="vo.type=='music'||vo.type=='voice'"
													:class="img_index==index ? 'popup-image-up-list-img':'popup-image-up-list-img-s'">
													<image v-if="!vo.is_play" @click="on_play(index)"
														style="width: 100rpx;height: 100rpx;" src="@/static/play.png"
														mode=""></image>
													<image v-if="vo.is_play" @click="mp3_for(index)"
														style="width: 100rpx;height: 100rpx;" src="@/static/playing.png"
														mode=""></image>
												</view>

												<view class="yihang" style="width: 122px;">
													<text>{{vo.filename}}</text>
												</view>
											</view>
											<template v-if="img_index==index||vo.ischoice">
												<view @click="on_choice(index)" class="banmi_flex a-c j-c"
													:class="vo.ischoice ? 'set-leftc' : 'set-left'">
													<text v-if="vo.ischoice" style="color: #fff;">✓</text>
												</view>
												<view v-if="vo.type=='images'" @click="previewImage(index)"
													class="set-center banmi_flex a-c j-c">
													<image style="width: 15px;height: 15px;" src="@/static/kuoda.png">
													</image>
												</view>
												<view class="set-right banmi_flex a-c j-c">
													<view class="banmi_flex j-c a-c" style="position: relative;">
														<image @click="on_more(index )"
															style="width: 25px;height: 25px;" src="@/static/more1.png"
															mode="">
														</image>
														<view v-if="vo.is_tan" class="set-tan">
															<button @click="on_rename(index)" class="f-16 set-tan-but">
																重命名
															</button>
															<button class="f-16   set-tan-but"
																@click="on_group_set(index)">
																移动分组
															</button>
															<button @click="on_img_del(index)"
																class="f-16 set-tan-but  ">
																删除
															</button>

														</view>
													</view>
												</view>
											</template>

										</view>
										<view class="banmi_flex j-c a-c p-30" style="width:99%;"
											v-if="wx_list.length==0">
											<text class="c-7">暂无附件</text>
										</view>
									</view>
									<view class="p-10" style="width: 100%;" v-if="wx_list.length>0">
										<uni-pagination @change="getPage" show-icon="true" :total="total" current="1"
											style="float: left;"></uni-pagination>
									</view>

								</scroll-view>
							</view>
						</view>
					</view>




				</view>


				<uni-popup ref="alertDialog_beizhu" type="dialog">
					<uni-popup-beizhu @confirm="on_ajax_ok" :name="name">
					</uni-popup-beizhu>
				</uni-popup>
				<uni-popup ref="alertDialog_fenzu" type="dialog">
					<uni-popup-fenzu @confirm="on_group_ok" :li="wx_group_list" :name="name">
					</uni-popup-fenzu>
				</uni-popup>

				<compress ref="compress" :quality="quality"> </compress>
			</view>
		</scroll-view>

		<view class="banmi_flex a-c bg-white">
			<button class="uni-dialog-button uni-border-left" @click="close">
				<text class="uni-dialog-button-text uni-button-color">关闭</text>
			</button>
			<button class="uni-dialog-button uni-border-left" @click="onplay">
				<text class="uni-dialog-button-text uni-button-color">添加</text>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		IconPark
	} from '@icon-park/vue/es/all';
	import popup from '../uni-popup/popup.js'
	import {
		initVueI18n
	} from '@dcloudio/uni-i18n'
	import messages from '../uni-popup/i18n/index.js'
	const {
		t
	} = initVueI18n(messages)
	import compress from "@/common/image/compress.vue"
	export default {
		name: "uniPopupDialog",
		mixins: [popup],
		emits: ['confirm', 'close'],
		components: {
			IconPark,
			compress
		},
		props: {
			t_name: {
				type: [String, Number],
				default: ''
			},
			t_type: {
				type: [String, Number],
				default: ''
			},
			count: {
				//最多数量
				type: Number | String,
				default: 9
			},
			imgList: {
				//最多数量
				type: Number | String,
				default: 0
			},
		},

		data() {
			return {
				quality: 0.8,
				dialogType: 'error',
				focus: false,
				val: "",
				img_url: '',
				tabidnex: 1,
				duration: 300,
				zd_price: 0,
				group_index: '-1',
				showTrans: false,
				key: '',
				img_index: '',
				wx_list: [],
				name: '名称',
				total: 2,
				maskClass: {
					position: 'fixed',
					bottom: 0,
					top: 0,
					left: 0,
					right: 0,
					backgroundColor: 'rgba(0, 0, 0, 0.4)'
				},
				transClass: {
					position: 'fixed',
					left: 0,
					right: 0
				},
				maskShow: true,
				is_tan: false,
				keya: '',
				wx_group_list: [],
				page: 1,
				reply_list: [],
				is_mp3: false,
				w_windowWidth: 0,
				h_windowHeight: 0,
				box_windowHeight: 0,
				box1_windowHeight: 0,
				mobile: '',
				is_show: true

			}
		},
		computed: {
			okText() {
				return this.confirmText || t("uni-popup.ok")
			},
			closeText() {
				return this.cancelText || t("uni-popup.cancel")
			},
			placeholderText() {
				return this.placeholder || t("uni-popup.placeholder")
			},
			titleText() {
				return this.title || t("uni-popup.title")
			}
		},
		watch: {
			type(val) {
				this.dialogType = val
			},
			mode(val) {
				if (val === 'input') {
					this.dialogType = 'info'
				}
			},
			value(val) {
				this.val = val
			}
		},

		created() {
			this.count1 = Number(this.count) - Number(this.imgList)
			var info = uni.getWindowInfo();
			this.h_windowHeight = info.windowHeight / 1.2;
			this.box_windowHeight = this.h_windowHeight - 60;
			this.box1_windowHeight = this.box_windowHeight - 40;
			if (navigator.userAgent.indexOf('Mobile') > -1) {
				this.w_windowWidth = info.windowWidth - 20;
				this.mobile = true;
			} else {
				this.w_windowWidth = info.windowWidth / 1.65;
				this.mobile = false;
			}
			this.group_id = 0;
			this.init();
			// 对话框遮罩不可点击
			this.popup.disableMask()
			// this.popup.closeMask()
			if (this.mode === 'input') {
				this.dialogType = 'info'
				this.val = this.value
			} else {
				this.dialogType = this.type
			}
			this.is_mp3 = false;
		},
		methods: {
			on_close() {
				this.popup.close()
			},
			mp3_for() {
				for (var i = 0; i < this.wx_list.length; i++) {
					this.wx_list[i]['is_play'] = false;
				}
				if (this.is_mp3) {
					this.innerAudioContext.stop();
				}
				this.$forceUpdate();

			},
			on_play(index) {
				this.mp3_for();
				var mp3 = this.img_url + this.wx_list[index]['attachment'];
				var that = this;
				if (!this.wx_list[index]['is_play']) {
					this.wx_list[index]['is_play'] = true;
					this.innerAudioContext = uni.createInnerAudioContext();
					this.innerAudioContext.autoplay = true;
					this.innerAudioContext.src = mp3;
					that.is_mp3 = true;
					this.innerAudioContext.onPlay(() => {});
				} else {
					that.is_mp3 = false;
					this.wx_list[index]['is_play'] = false;
					this.innerAudioContext.stop();
				}
				this.$forceUpdate();
			},
			async on_group_ok(group_id) {

				let requestParams = {
					group_id: group_id,
					id: this.id
				};
				const ret = await this.Banmikeji.Upload_aattachment_group_grouping(requestParams);
				uni.showToast({
					title: ret.msg,
					icon: 'none'
				})
			},
			on_group_set(index) {
				this.id = this.wx_list[index]['id'];
				this.$refs.alertDialog_fenzu.open()
			},
			on_update_group(index) {
				this.group_index = index;
				if (index == -1) {
					this.group_id = 0;
				} else {
					this.group_id = this.wx_group_list[index]['group_id'];
				}
				this.page = 1;
				this.init();
			},
			on_group_rename(index) {
				this.name = '重名分组名称';
				this.keya = 'group';
				this.group_index = index;
				this.group_id = this.wx_group_list[index]['group_id'];
				this.$refs.alertDialog_beizhu.open()
			},
			on_group_del(index) {
				var that = this;
				var id = this.wx_group_list[index]['group_id'];
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在删除中...'
							})
							that.group_del(id);
						}
					}
				});
			},
			async group_del(id) {
				var that = this;
				let requestParams = {
					id: id
				};
				const ret = await this.Banmikeji.Upload_locality_attachment_group_del(requestParams);
				uni.showToast({
					title: ret.msg,
					icon: 'none'
				})
				if (ret.status == 200) {
					that.wx_group_list = that.wx_group_list.filter(t => t.group_id != id);
					that.is_show = false
				}
				uni.hideLoading();
			},
			on_ajax_ok(val) {
				if (this.keya == 'news') {
					this.on_ajax_news(val);
					return
				} else if (this.keya == 'rename') {
					this.on_ajax_re(val);
				} else if (this.keya == 'group') {
					this.locality_attachment_group_edit(val);
				}
			},
			async locality_attachment_group_edit(val) {
				let that = this;
				var data = {
					name: val,
					group_id: this.group_id
				}
				const ret = await this.Banmikeji.Upload_locality_attachment_group_edit(data);
				uni.showToast({
					title: ret.msg,
					icon: 'none'
				})
				if (ret.status == 200) {
					that.$refs.alertDialog_beizhu.close()
					that.wx_group_list[that.group_index]['name'] = val
					that.wx_group_list[that.group_index]['show'] = false
				}
			},
			async on_ajax_news(val) {
				let that = this;
				let requestParams = {
					name: val,
					t_type: this.t_type
				};
				const ret = await this.Banmikeji.Upload_locality_attachment_group_add(requestParams);
				uni.showToast({
					title: ret.msg,
					icon: 'none'
				})
				var find = {
					group_id: ret,
					name: val,
					text: that.t_type,
					show: false
				}
				that.wx_group_list.push(find);
				this.$refs.alertDialog_beizhu.close()

			},
			on_img_del(index) {
				var that = this;
				var img_id = this.wx_list[index]['id'];
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？删除后图片素材也将删除',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在删除中...'
							})
							that.img_del(img_id);
						}
					}
				});


			},
			async img_del(id) {
				var that = this;
				let requestParams = {
					id: id
				};

				const ret = await this.Banmikeji.Upload_locality_attachment_wx_img_del(requestParams);
				uni.showToast({
					title: ret.msg,
					icon: 'none'
				})
				that.$refs.alertDialog_beizhu.close()
				if (ret.status == 200) {
					that.wx_list = that.wx_list.filter(t => t.id != id);
				}
				uni.hideLoading()
			},
			async on_ajax_re(val) {
				let that = this;
				let requestParams = {
					filename: val,
					id: this.img_id
				};
				const ret = await this.Banmikeji.Upload_locality_attachment_name_edit(requestParams);
				this.$refs.alertDialog_beizhu.close();
				this.wx_list[this.index]['filename'] = val;
				that.wx_list[that.index]['is_tan'] = false;
			},
			on_news() {
				this.name = '添加分组名称';
				this.keya = 'news';
				this.$refs.alertDialog_beizhu.open()
			},
			on_rename(index) {
				this.keya = 'rename';
				this.index = index;
				this.img_id = this.wx_list[index]['id'];
				this.$refs.alertDialog_beizhu.open()
			},
			getPage(res) {
				this.page = res.current;
				this.init()
			},
			async init() {
				let requestParams = {
					page: this.page,
					group_id: this.group_id,
					t_type: this.t_type
				};
				const ret = await this.Banmikeji.Upload_locality_attachment_list(requestParams);
				this.img_url = ret.img_url;
				this.wx_list = ret.data.img_list.data;
				this.wx_group_list = ret.data.wx_group_list;
				this.total = ret.data.img_list.total;

			},
			on_is_tan() {
				if (this.is_tan) {
					this.is_tan = false;
					this.on_tan();
				}
			},
			play(index) {
				this.video_id = index;
				this.videoContext = uni.createVideoContext('videoId' + this.video_id, this)
				this.videoContext.requestFullScreen()
				this.videoContext.play()
			},
			fullscreenchange(e) {
				var that = this;
				if (!e.detail.fullScreen) {
					uni.createVideoContext('videoId' + this.video_id, this).pause();
				}
			},
			previewImage(index) {
				if (this.t_type == 'video') {
					this.play(index)
					return
				}
				let img_list = [];

				img_list.push(this.img_url + this.wx_list[index]['attachment'])

				//uniapp预览轮播图
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: img_list //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			on_show() {
				this.is_show = false;
				this.wx_group_list[this.group_index]['show'] = false;
			},
			on_more_zu(index) {
				var that = this;
				this.group_index = index;
				setTimeout(function() {
					that.is_show = true;
					that.wx_group_list[index]['show'] = true;
				}, 100);

			},
			on_more(index) {
				var that = this;
				this.wx_index = index;
				setTimeout(function() {
					that.wx_list[index]['is_tan'] = true;
					that.$forceUpdate()
				}, 100);

			},
			on_tan() {
				for (var i = 0; i < this.wx_list.length; i++) {
					this.wx_list[i]['is_tan'] = false
				}
			},
			on_choice(index) {
				var that = this;
				if (this.reply_list.length >= this.count1 && this.wx_list[index]['ischoice'] == false) {
					uni.showToast({
						title: '最多' + this.count1 + '张素材',
						icon: 'error'
					})
					return
				}
				this.on_tan();
				var reply_list = this.reply_list;
				if (this.wx_list[index]['ischoice'] == false) {
					this.wx_list[index]['ischoice'] = true;
					var find = {
						filename: this.wx_list[index]['filename'],
						attachment: this.wx_list[index]['attachment'],
						width: this.wx_list[index]['width'],
						height: this.wx_list[index]['height'],
						type: this.wx_list[index]['type'],
						id: this.wx_list[index]['id'],
						is_play: false
					}
					reply_list.push(find);
					this.reply_list = reply_list;
				} else {
					this.wx_list[index]['ischoice'] = false;
					this.reply_list = this.reply_list.filter(t => t.id != this.wx_list[index]['id']);
				}
				that.$forceUpdate()
			},
			on_img_index(index) {
				this.img_index = index;
			},
			on_music() {
				var that = this;
				uni.chooseFile({
					count: 1, //选取的文件个数限制
					extension: [".mp3"], //可定义允许哪些后缀的文件可被选择
					success: function(res) {
						var imageName = res.tempFiles[0].name;

						uni.showLoading({
							title: '正在上传中...'
						})
						let tempFilePaths = res.tempFilePaths[0];
						let innerAudioContext = uni.createInnerAudioContext();
						innerAudioContext.autoplay = false;
						innerAudioContext.src = tempFilePaths;
						setTimeout(function() {
							let duration = innerAudioContext.duration;
							var data = {
								width: 0,
								height: 0,
								duration: duration,
								path: tempFilePaths,
								url: tempFilePaths,
								imageName: imageName,
								fileType: 'music',
								filesize: 0,
								filename: '',
								suffix: 'mp3',
								filepath: tempFilePaths,
							}
							that._Upload(data, 0)
						}, 1000);
					},
				});
			},
			on_video() {
				var that = this;
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function(res) {
						console.log(res.tempFile.type);
						var src = res.tempFilePath;
						var data = {
							width: res.width,
							height: res.height,
							duration: res.duration,
							path: src,
							url: src,
							imageName: res.name,
							fileType: 'video',
							filesize: 0,
							filename: res.name,
							suffix: 'mp4',
							filepath: src,
						}
						that._Upload(data, 0)
					}
				});
			},
			on_img(index) {
				if (this.t_type == 'video') {
					this.on_video();
					return
				} else if (this.t_type == 'music' || this.t_type == 'voice') {
					this.on_music();
					return
				}
				var list = ['JPG', 'PNG', 'GIF', 'JPEG', 'jpg', 'jpeg', 'png', 'gif']
				var that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						var imageName = res.tempFiles[0].name;
						const xhr = new XMLHttpRequest();
						xhr.open('GET', res.tempFilePaths[0]);
						xhr.responseType = 'blob';
						xhr.onload = () => {
							var blob = xhr.response;
							var suffix = blob.type.split('/').pop(); // 获取文件的后缀   

							var is_suffix = 0;
							for (var i = 0; i < list.length; i++) {
								if (list[i] == suffix) {
									is_suffix = 1;
								}
							}
							if (is_suffix == 0) {
								uni.showToast({
									title: '只支持png,jpeg,jpg,gif格式的图片',
									icon: 'error'
								})
								return
							}
							const tempFilePaths = res.tempFilePaths;
							uni.getImageInfo({
								src: tempFilePaths[0],
								success: (ret) => {

									var data = {
										width: ret.width,
										height: ret.height,
										path: tempFilePaths[0],
										url: tempFilePaths[0],
										imageName: imageName,
										fileType: 'image',
										filesize: 0,
										filename: imageName,
										suffix: suffix,
										filepath: tempFilePaths[0],
										duration: 0,
									}

									that._Upload(data, index)

								}
							})
						};
						xhr.send();
					}
				});
			},
			_Upload(data, index) { //index==0不压缩   1压缩
				var that = this;
				var img_list = new Array();
				img_list.push(data);
				uni.showLoading({
					title: '正在上传中...',
					mask:true
				})
				if (index == 0) {
					requst(img_list)
					return
				}
				this.$refs.compress.yasuoImg(img_list).then(e => {
					let imgs = e.map((value, index) => {
						return {
							path: value.tempFilePath,
							fileType: value.fileType,
							width: value.width,
							height: value.height,
							imageName: value.imageName,
							fileType: 'image',
							filesize: 0,
							filename: '',
							suffix: value.suffix,
							filepath: value.tempFilePath,
							duration: 0,
						}
					})

					requst(imgs)
				})

				function requst(imgs) {


					that.Bmupload.banmi_upload({
						files: imgs,
						maxSize: 300000,
						group_id: that.group_id,
						t_type: that.t_type,
						onProgressUpdate: res => {

						}
					}).then(res => {

						setTimeout(function() {
							uni.hideLoading();
							that.wx_list = [];
							that.page = 1;
							that.init();
						}, 2000);


					});



				}
			},
			onplay() {
				this.$emit('confirm', this.reply_list, this.img_url)
				this.popup.close()
				this.mp3_for();
				this.$forceUpdate();
			},
			closeDialog() {
				this.$emit('close')
				if (this.beforeClose) return
				this.popup.close()
			},
			close() {
				this.popup.close()
				this.mp3_for();
			}
		}
	}
</script>


<style lang="scss">
	.set-tan-but {
		background-color: #fff;
		height: 40px;
		border-radius: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	button::after {
		border: none;
	}

	.classify-liv {
		text-align: center;
		align-items: center;
		padding-bottom: 10px;
		border: solid 2px #FD9A01;
		text-align: center;
		color: #999;
		border-radius: 10px;
		width: 200px;
		font-size: 24upx;
		margin: 10;

	}

	.classify-lixzlv {
		text-align: center;
		align-items: center;
		padding-bottom: 10px;
		border: solid 2px #999;

		color: #999;
		border-radius: 10px;
		width: 200px;
		font-size: 24upx;
		margin: 10;

	}

	.uni-popup-dialog {
		border-radius: 11px;
		background-color: #fff;
	}

	.uni-dialog-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		banmi_flex-direction: row;
		justify-content: center;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.uni-dialog-title-text {
		font-size: 16px;
		font-weight: 500;
	}

	.top_head {
		background-color: #F8F8F8;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.update_wx_li {
		flex: 0 0 5%;

		font-size: 24upx;
		margin: 10px;
	}

	.uni-dialog-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-top: 10px;
	}

	.set-leftc {
		text-align: center;
		height: 20px;
		width: 20px;
		background: #1E90FF;
		position: absolute;
		top: 10px;
		left: 10px;
		border-radius: 2px;
		font-size: 12px;
		z-index: 88;
	}

	.set-left {
		text-align: center;
		height: 20px;
		width: 20px;
		background: rgba(0, 0, 0, 0.8);
		border: solid 3rpx #09BB07;
		position: absolute;
		top: 10px;
		left: 10px;
		border-radius: 2px;
		font-size: 12px;
		z-index: 88;
	}

	.set-right {
		text-align: center;
		height: 25px;
		width: 25px;
		border-radius: 12px;
		background: #F5F5F5;
		color: #000;
		position: absolute;
		top: 8px;
		right: 10px;
		font-size: 20px;
		z-index: 88;
	}

	.set-tan-zu {
		text-align: center;
		border-radius: 3px;
		border: solid 1rpx #DCDCDC;
		color: #000;
		position: absolute;
		top: 20px;
		left: -60px;
		font-size: 20px;
		z-index: 888;
		width: 80px;
		z-index: 90;
		border-radius: 0;
		background-color: aqua;
		height: 80px;
	}

	.set-tan {
		text-align: center;
		border-radius: 3px;
		border: solid 1rpx #DCDCDC;
		color: #000;
		position: absolute;
		top: 40px;
		left: -80px;
		font-size: 20px;
		z-index: 888;
		width: 100px;
		z-index: 88;
		border-radius: 0;
		background-color: aqua;
		height: 120px;
	}

	.set-center {
		text-align: center;
		height: 25px;
		width: 25px;
		border-radius: 12px;
		background: #F5F5F5;
		color: #000;
		position: absolute;
		top: 8px;
		right: 50px;
		font-size: 20px;
		z-index: 88;
	}

	.uni-dialog-content-text {
		font-size: 14px;
		color: #6C6C6C;
	}

	.f20 {
		font-size: 24px;
	}

	.uni-dialog-button-group {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		banmi_flex-direction: row;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}

	.uni-dialog-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */

		flex: 1;
		banmi_flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}



	.uni-dialog-button-text {
		font-size: 16px;
		color: #333;
	}

	.uni-button-color {
		color: #007aff;
	}



	.uni-dialog-input {
		banmi_flex: 1;
		font-size: 14px;
		border: 1px #eee solid;
		height: 40px;
		padding: 0 10px;
		border-radius: 5px;
		color: #555;
	}

	.uni-popup__success {
		color: #4cd964;
	}

	.uni-popup__warn {
		color: #f0ad4e;
	}

	.uni-popup__error {
		color: #dd524d;
	}

	.uni-popup__info {
		color: #909399;
	}

	.update_groupxz {
		color: #000;
		background-color: #DCDCDC;
	}

	.group_but {
		width: 130px;
		background-color: transparent;
		display: flex;
		justify-content: flex-start;
		margin-left: 10px;
	}
</style>